<template>
	<div class="container">
		<el-row :gutter="20">
			<div class="buttonGroup">
				<el-button-group>
					<el-button
						type="primary"
						icon="el-icon-plus"
						@click="handleAddMenus(0)"
						size="small"
						>新增一级菜单</el-button
					>
					<el-button
						type="warning"
						icon="el-icon-back"
						@click="returnMenus"
						size="small"
						>返回顶级</el-button
					>
					<el-button
						icon="el-icon-refresh-right"
						@click="onRefresh"
						size="small"
						>刷新</el-button
					>
				</el-button-group>
			</div>
			<el-col :span="6">
				<div class="treeContent">
					<el-tree
						:data="treeList"
						node-key="id"
						default-expand-all
						:expand-on-click-node="false"
						@node-click="nodeClick"
						ref="treeRef"
					>
					</el-tree>
				</div>
			</el-col>
			<el-col :span="18">
				<el-table :data="treeList" border stripe>
					<el-table-column align="center" label="ID" width="75">
						<template slot-scope="scope">{{
							scope.row.id
						}}</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="菜单名称"
						min-width="100"
					>
						<template slot-scope="scope">{{
							scope.row.label
						}}</template>
					</el-table-column>
					<el-table-column label="菜单URL" align="left">
						<template slot-scope="scope">{{
							scope.row.path
						}}</template>
					</el-table-column>

					<!-- 操作 -->
					<el-table-column
						label="操作"
						min-width="260"
						align="center"
					>
						<template slot-scope="scope">
							<el-button
								@click.native.prevent="
									handleAddMenus(scope.row.id)
								"
								type="text"
								size="mini"
								>新增子菜单
							</el-button>
							<el-button
								@click.native.prevent="onEditMenus(scope.row)"
								type="text"
								size="mini"
								>编辑</el-button
							>
							<el-button
								@click.native.prevent="
									onResources(scope.row.id)
								"
								type="text"
								size="mini"
								>资源管理</el-button
							>
							<el-button
								@click.native.prevent="ondeleteMenus(scope.row)"
								type="text"
								size="mini"
								class="d-c"
								v-if="!scope.row.superFlag"
								>删除</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { RequestMenuList } from '@/api/user'
export default {
	data() {
		return {
			treeList: []
		}
	},
	created() {
		this.getTreeList()
	},
	methods: {
		returnMenus() {},
		handleAddMenus() {},
		onRefresh() {},
		nodeClick() {},
		async getTreeList() {
			let user = localStorage.getItem('userInfo')
			user = JSON.parse(user)
			const data = await RequestMenuList(user && user.roleId)
			let { code, sysmenu } = data
			if (code === 200) {
				this.treeList = sysmenu
			}
		},
    handleAddMenus(){

    },
    onEditMenus(){

    },
    ondeleteMenus(){}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: white;

	.treeContent {
		width: 90%;
		max-height: 650px;
		border: 1px solid #ededed;
		padding: 10px;
		margin: 0 10px;
		overflow: auto;
		background-color: white;
	}
}
</style>